<template>
  <div class="asthma-template-manage-container">
    <section>
      <XmCardHeader title="西医哮喘治疗方案模板管理"></XmCardHeader>
      <div class="page-header-hubs">
        <div class="left">
          <el-button type="primary" @click="add">添加</el-button>
        </div>
        <div class="right">
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="empty">重置</el-button>
        </div>
      </div>
      <div class="content">
        <el-form>
          <el-row :gutter="20">
            <el-col :span="6">
              <xm-f-select
                label="治疗方案类别:"
                v-model="form.treatmentPlanType"
                :options="treatmentPlans()"
                @change="() => (form.controlLevel = '')"
              ></xm-f-select>
            </el-col>
            <el-col
              :span="5"
              v-if="form.treatmentPlanType !== '缓解药物治疗方案'"
            >
              <XmFSelect
                :label="isAcuteTitle(form.treatmentPlanType)"
                v-model="form.controlLevel"
                :options="fitterControlLevels(form)"
              ></XmFSelect>
            </el-col>
            <el-col :span="5">
              <xm-f-select
                label="模板类型:"
                v-model="form.type"
                :options="templateTypes"
              ></xm-f-select>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="年龄:">
                <el-input v-model="form.startAge"></el-input>
                至
                <el-input v-model="form.endAge"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="体重:">
                <el-input v-model="form.startWeight"></el-input>
                至
                <el-input v-model="form.endWeight"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <xm-f-intput
                v-model="form.medicineName"
                label="模板内容筛选"
              ></xm-f-intput>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </section>
    <section style="margin-top: 44px">
      <PaginationTable
        ref="ptable"
        :tableData="listData"
        @pagination="paginaChange"
      >
        <XMTableColumn label="模版版本" prop="actionPlanType"></XMTableColumn>
        <XMTableColumn label="年龄" prop="age"></XMTableColumn>
        <XMTableColumn
          label="体重"
          sortable="custom"
          prop="weight"
        ></XMTableColumn>
        <XMTableColumn label="控制级别" prop="controlLevel"></XMTableColumn>
        <XMTableColumn label="模板" width="300" prop="title">
          <template #default="scope">
            <span
              v-for="(item, index) in splitStr(scope.row.title)"
              :key="index"
            >
              {{ item }}
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn
          label="模板说明"
          width="300"
          prop="remark"
        ></XMTableColumn>
        <XMTableColumn
          label="治疗方案类别"
          prop="treatmentPlanType"
        ></XMTableColumn>
        <XMTableColumn label="模板类型" prop="type"></XMTableColumn>
        <XMTableColumn label="创建人" prop="createby"></XMTableColumn>
        <XMTableColumn label="操作" width="300">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="edit(scope.row)"
              style="width: 70px"
            >
              {{ scope.row.status === 1 ? '待完善' : '编辑' }}
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="del(scope.row)"
              style="width: 70px"
            >
              删除
            </el-button>
          </template>
        </XMTableColumn>
      </PaginationTable>
    </section>
    <asthmaTemplateDialog ref="templateDialog"></asthmaTemplateDialog>
  </div>
</template>
<script>
  import { reactive, ref, toRefs } from '@vue/reactivity'
  import asthmaTemplateDialog from './components/asthmaTemplateDialog.vue'
  import emr from '@/hooks/emr.vue'
  import { useRouter } from 'vue-router'
  import {
    loadActionTemplates,
    delActionTemplate,
  } from '@/api/modules/actionPlan'
  import { onActivated } from '@vue/runtime-core'
  import common from '@/utils/common'
  import filter from '@/hooks/filter.vue'
  export default {
    name: 'asthmaTemplateManage',
    components: { asthmaTemplateDialog },
    setup() {
      const templateDialog = ref(null)
      const router = useRouter()
      const ptable = ref(null)
      const add = function () {
        // templateDialog.value.initData()
        router.push({ name: 'addAsthmaTemplate' })
      }

      const d = reactive({
        form: {},
        listData: {},
        search: {
          pageIndex: 1,
          pageSize: 5,
          orderType: 1,
          actionPlanType: '简易版',
        },
      })

      const loadData = function () {
        common.XmLoading()
        loadActionTemplates({ ...d.form, ...d.search, templateType: 1 })
          .then((res) => {
            common.XmLoading(false)
            d.listData = res
          })
          .catch(() => {
            common.XmLoading()
          })
      }

      onActivated(() => {
        loadData()
      })
      // onBeforeMount(() => {
      //   loadData()
      // })
      const paginaChange = function (params) {
        d.search.pageIndex = params.current
        d.search.pageSize = params.pageSize
        d.search.orderType = params.orderType
        loadData()
      }

      const empty = function () {
        d.form = {}
        d.search = { pageIndex: 1, pageSize: 5, orderType: 1 }
        ptable && ptable.value.clearData()
        loadData()
      }
      const edit = function (row) {
        router.push({ name: 'addAsthmaTemplate', query: { id: row.id } })
      }
      const del = async function (row) {
        await delActionTemplate({ id: row.id })
        loadData()
        console.log('row =' + JSON.stringify(row))
      }
      const test = function (val) {
        console.log('valsplit =' + JSON.stringify(val.split(',')))
      }
      return {
        templateDialog,
        loadData,
        add,
        paginaChange,
        edit,
        del,
        empty,
        test,
        ptable,
        ...emr(),
        ...toRefs(d),
        ...toRefs(filter()),
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .asthma-template-manage-container {
    margin: 22px;
    background-color: white;
    @include card-shadow;
    padding: 22px;
    .page-header-hubs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-button {
        width: 100px;
      }
    }
    .content {
      .el-form-item {
        margin-top: 15px;
        margin-bottom: 15px;
      }
      .el-input {
        width: 40%;
      }
    }
  }
</style>
